<template>
  <!-- 推荐攻略 -->
  <div>
    <div class="tjgo">
      <p>推荐攻略</p>
      <!-- 推荐攻略内容区域开始 -->
      <div class="tjgo_text" v-for="(title, index) in titles" :key="index">
        <router-link :to="{ path: '/recommend', query: { id: title.id } }">
          <div class="tjgo_top">
            <div class="tjgo_title">{{ title.title }}</div>
            <div class="tjgoleft_login" v-if="title.glance == 12855">
              <!-- 首蜂图片 -->
              <img src="~assets/img/tjgo/fs.png" alt="图片加载失败" />
            </div>
            <div v-else></div>
          </div>
          <div class="tjgo_bottom">
            <div class="bottom_left">
              <!-- 左面人物图 -->
              <img v-lazy="title.img" alt />
            </div>
            <div class="bottom_right">
              <div class="summary">{{ title.article }}</div>
              <div class="extra">
                {{ title.glance }}浏览
                <div class="author">
                  {{ title.screen }}
                  <img v-lazy="title.portrait" />
                </div>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <!-- 推荐攻略内容区域结束 -->
    <!-- 点击加载更多 -->
    <div class="gd" @click="increase">点击加载更多 >></div>
    <!-- 脚部 -->
    <div class="foot">
      <div class="foot_top">
        <ul>
          <li>
            <router-link to>pc版</router-link>
          </li>
          <li>
            <router-link to>用户反馈</router-link>
          </li>
          <li>
            <router-link to>加入我们</router-link>
          </li>
          <li>
            <router-link to="/login">登录</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "tjgo",
  data() {
    return {
      titles: [],
      //存储当前的页码
      page: 1,
      //用于存储服务器返回的总页数
      pagecount: 0,
    };
  },
  methods: {
    // 封装axios请求
    loadData() {
      this.$axios.get("/title?page=" + this.page).then((res) => {
        let data = res.data.result;
        data.forEach((item) => {
          this.titles.push(item);
        });
      });
    }, //封装结束
    increase() {
      this.page++;
      this.loadData();
    },
  },
  mounted() {
    this.loadData();
    this.$store.commit("setSite", "");
  },
};
</script>
<style scoped>
.tjgo p {
  display: block;
  height: 19px;
  width: 88px;
  line-height: 19px;
  font-family: PingFang SC;
  padding-left: 5px;
  border-left: #ffdb53 solid 3px;
  margin-left: 10px;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 600;
  background: #fff;
}
.tjgo_text {
  padding-left: 10px;
}
.tjgo_top {
  width: 100%;
  line-height: 30px;
}
.tjgo_title {
  float: left;
  width: 100%;
  padding: 11.25px 56.25px 0 0;
  font-size: 18px;
  font-weight: 500;
}
.tjgoleft_login {
  float: right;
  width: 40px;
  height: 21px;
  margin-top: -39px;
  margin-right: 1%;
}
.tjgoleft_login img {
  width: 100%;
  height: 100%;
}
.bottom_left img {
  float: left;
  width: 129.97px;
  height: 90px;
  margin-right: 15px;
}
.bottom_right {
  float: left;
  width: 210.2px;
  color: #999;
  font-size: 11px;
}
.bottom_right .summary {
  line-clamp: 3;
  width: 166.02px;
  height: 59.25px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  /* 使其不换行 */
  /* white-space: nowrap; */
}
.author {
  float: right;
}
.author img {
  width: 19.98px;
  height: 19.98px;
  border-radius: 50%;
  vertical-align: middle;
}
.gd {
  clear: both;
  width: 375px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #2185fa;
  font-size: 12px;
}
.foot {
  width: 100%;
  /* height: 120px; */
  text-align: center;
  background-color: #2a282c;
  padding-bottom: 17px;
  color: #575658;
}
.foot_top {
  width: 100%;
  height: 64px;
}
.foot_top li a {
  display: inline-block;
  width: 73px;
  line-height: 24px;
  height: 24px;
  text-align: center;
  border: 1px solid #403e42;
  background-color: #403e42;
  border-radius: 4px;
  font-size: 14px;
  color: #929193;
  margin: 5px auto;
}
.foot_top li:nth-child(3) a {
  color: #ff9d00;
}
.foot_top ul {
  display: flex;
  line-height: 64px;
}
.foot_top ul li {
  margin: 0 auto;
}
</style>
